<template>
  <!-- 处理登录页 -->
  <router-view v-slot="{ Component }" v-if="'login' == route.name">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <!-- 其它页面 -->
  <a-layout v-else>
    <a-layout-header :style="headerStyle">Header</a-layout-header>
    <a-layout>
      <a-layout-sider :style="siderStyle" v-model:collapsed="collapsed" :trigger="null" collapsible>
        <LayoutSider :collapsed="collapsed" @collapsed="handleCollapsed" />
      </a-layout-sider>
      <a-layout-content :style="contentStyle">
        <router-view v-slot="{ Component }">
          <keep-alive>
            <component :is="Component" />
          </keep-alive>
        </router-view>
      </a-layout-content>
    </a-layout>
    <a-layout-footer :style="footerStyle">Footer</a-layout-footer>
  </a-layout>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import LayoutSider from '@/components/layout/LayoutSider.vue'

const route = useRoute()
const collapsed = ref(false)
const siderStyle = {
  textAlign: "center",
  backgroundColor: "#ffffff",
  width: "200px",
  height: 'calc(100vh - 130px)',
  borderRight: '2px solid #f0f0f0'
}
const headerStyle = {
  textAlign: "center",
  backgroundColor: "#7dbcea",
  height: "80px"
}
const contentStyle = {
  textAlign: "center",
  backgroundColor: "#ffffff",
  paddingTop: '10px'
}
const footerStyle = {
  textAlign: "center",
  backgroundColor: "#7dbcea",
  height: "50px"
}

const handleCollapsed = () => {
  collapsed.value = !collapsed.value
}
</script>